<template>
  <div class="progress">
    <div class="progressDesc">
      <img
        :src="getAssetsFile(`imgs/repairWorkflow/inspectionWork5.png`)"
        alt="进度图标"
        style="width: 7px; height: 14px"
      />
      <div class="txt">当前作业完成进度</div>
    </div>
    <div class="progressBar">
      <div class="progressBarLine">
        <div class="progressBox" ref="progressBoxRef">
          <div
            class="dots"
            v-for="(color, index) in colorList"
            :key="index"
            :style="{ background: color }"
          ></div>
        </div>
      </div>
      <div class="percent">{{ percentNum }}%</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { getAssetsFile } from "@/utils";

const percentNum = ref(100);
const divNums = ref(0);
const colorList = ref([]);
const progressBoxRef = ref(null);

const calculateDivNums = () => {
  if (!progressBoxRef.value) return;
  const divWidth = progressBoxRef.value.offsetWidth;
  divNums.value = Math.max(1, Math.floor((divWidth) / 31));
};

const setStyle = () => {
  const activeCount = calculateActiveDots();
  // 定义前4个渐变颜色
  const gradientColors = [
    "linear-gradient(90deg, #424f69 0%, #385d7e 100%)",
    "linear-gradient(90deg, #385d7e 0%, #2c7598 100%)",
    "linear-gradient(90deg, #2c7598 0%, #2092b2 100%)",
    "linear-gradient(90deg, #2092b2 0%, #10c2d5 100%)",
  ];
  colorList.value = Array.from({ length: divNums.value }, (_, i) => {
    if (i >= activeCount) return "#424F68"; // 未激活块
    if (i < 4) return gradientColors[i]; // 前4个渐变块
    return "#03F3F1"; // 第5个及之后的块
  });
};

const calculateActiveDots = () => {
  if (percentNum.value <= 0) return 0;
  if (percentNum.value >= 100) return divNums.value;

  return Math.max(
    1,
    Math.min(
      Math.ceil((divNums.value * percentNum.value) / 100),
      divNums.value - (percentNum.value < 100 ? 1 : 0)
    )
  );
};

onMounted(() => {
  calculateDivNums();
  setStyle();
  window.addEventListener("resize", calculateDivNums);
});

watch(percentNum, () => {
  setStyle();
});
</script>

<style lang="scss" scoped>
.progress {
  display: flex;
  flex-direction: column;

  .progressDesc {
    display: flex;
    align-items: center;
    height: 23px;
    margin-bottom: 8px;

    img {
      width: 7px;
      height: 14px;
      margin-right: 7px;
    }

    .txt {
      font-size: 21px;
      color: #fff;
    }
  }

  .progressBar {
    display: flex;
    align-items: center;

    .progressBarLine {
      flex: 1;
      height: 16px;
      background-color: transparent;

      .progressBox {
        display: flex;
        flex-wrap: nowrap; /* 确保不换行 */
        width: 100%;
        height: 100%;
        overflow: hidden; /* 隐藏溢出的块 */

        .dots {
          flex-shrink: 0; /* 防止块被压缩 */
          width: 27px;
          height: 16px;
          margin-right: 4px;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    .percent {
      margin-left: 13px;
      font-family: YouSheBiaoTiHei, sans-serif;
      font-size: 27px;
      color: #ffffff;
    }
  }
}
</style>